<template>
	<view class="container-bottom-btns">
		<view style="background-color: #fff;">
			<Tabs :tabList="vipTabs" keyName="name" @tabChange="tabChange"></Tabs>
		</view>
		
		<view class="vip-price flex-x-bet-y-center">
			<view class="flex-y-center">
				<image src="/static/images/vip.png" class="vip-icon" mode=""></image>
				<text class="vip-name">{{vipTabs[currentTab].name}}</text>
			</view>
			<view class="vip-price-text">
				<text style="font-size: 31rpx;">￥</text>
				<text style="font-size: 40rpx;">{{vipInfo.price || 0}}</text>
			</view>
		</view>
		
		<view class="title">{{vipTabs[currentTab].name}}</view>
		<view class="parse-content">
			<u-parse :content="vipInfo.vipTitle"></u-parse>
		</view>
		<view class="title">会员说明</view>
		<view class="parse-content">
			<u-parse :content="vipInfo.intro"></u-parse>
		</view>
		
		
		<view class="bottom-btn-wrapper" style="padding-top: 0;">
			<view class="expire-time" v-if="userInfo.vipEnd">到期时间：{{userInfo.vipEnd}}</view>
			<SubmitBtn text="立即开通" :customStyle="{'margin-top:': '15rpx'}" @tap="submit"></SubmitBtn>
		</view>
	</view>
</template>

<script>
	import Tabs from '@/components/Tabs/Tabs.vue'
	import { mapGetters } from 'vuex'
	import { getVipList, openVip } from '@/api/common.js'
	import { toast } from '@/utils/uni-api.js'
	export default {
		components:{
			Tabs
		},
		data() {
			return {
				vipTabs: [{
					name: '月度会员',
					type: 1
				}, {
					name: '季度会员',
					type: 2
				}, {
					name: '年费会员',
					type: 3
				}],
				currentTab: 0,
				vipInfo: {},
				content: ''
			};
		},
		onLoad(){
			this.getVipList()
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		methods:{
			tabChange(e){
				this.currentTab = e
				this.getVipList()
			},
			getVipList(){
				getVipList({vip_type: this.vipTabs[this.currentTab].type}).then(res => {
					this.vipInfo = res.result[0]
				})
			},
			submit(){
				openVip({vipId: this.vipInfo.id, payType: 3, loginWay: 1}).then(res => {
					// 发起微信支付
					uni.requestPayment({
						timeStamp: res.result.timeStamp,
						nonceStr: res.result.nonceStr,
						package: res.result.package,
						signType: res.result.signType,
						paySign: res.result.paySign,
						success: res => {
							uni.hideLoading({})
							toast('会员开通/续费成功', true)
							this.$store.dispatch('user/getUserInfo');
							setTimeout(() => {
								uni.navigateBack(1)
							}, 800)
						},
						fail: function(err) {
							uni.hideLoading({})
							if(err.errMsg == 'requestPayment:fail cancel'){
								toast('取消支付')
							}else{
								toast('支付失败')
							}
							
						},
					});
				})
			}
		}
	}
</script>

<style lang="scss">
	.vip-price{
		margin: 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 25rpx 30rpx;
		
		.vip-icon{
			width: 66rpx;
			height: 66rpx;
		}
		
		.vip-name{
			font-weight: bold;
			font-size: 33rpx;
			color: #333333;
			margin-left: 15rpx;
		}
		
		.vip-price-text{
			display: flex;
			align-items: center;
			font-weight: 800;
			font-size: 40rpx;
			color: #F42D1F;
		}
	}

	.title{
		margin: 35rpx 30rpx;
		font-weight: 500;
		font-size: 29rpx;
		color: #808080;
	}
	
	.parse-content{
		margin: 30rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 30rpx;
	}
	
	
	.container-bottom-btns{
		padding-bottom: calc(250rpx + env(safe-area-inset-bottom));
	}
	
	.bottom-btn-wrapper{
		display: flex;
		flex-direction: column;
		
		.expire-time{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 750rpx;
			height: 96rpx;
			background: #FFF2EC;
			font-weight: 500;
			font-size: 29rpx;
			color: $theme-color;
			margin-bottom: 15rpx;
		}
		
	}
</style>